<template>
	<div class="redbag">
		<van-sticky>
		<van-nav-bar
		  title="我的红包"
		  left-arrow
		  @click-left="onClickLeft"
		 
		/>
		</van-sticky>
		<van-notice-bar  left-icon="volume-o" color="#ff8737" background="#fffae1">			
		  红包使用仅限..
		</van-notice-bar>
		
		<van-tabs  sticky swipeable>
			<van-tab title="我的红包">
				<van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
					<div v-for="redBag in allRedBags">
						<div class="redBag_box" >
							<div class="coupon coupon-wave-left coupon-wave-right coupon-yellow-gradient">
								<div class="coupon-info coupon-hole coupon-info-right-dashed">
									<div class="coupon-store">{{redBag.redBag.red_bag_content}}</div>
									<div class="coupon-price">&yen;{{redBag.redBag.face_value}}<span>红包</span></div>
									<div class="coupon-description">{{redBag.redBag.red_bag_content}}</div>
								</div>
								<div class="coupon-get">
									<div class="coupon-desc">副券</div>
									<div class="coupon-expiry-date">{{redBag.redBag.dead_time}}<br/>到期</div>
								</div>
							</div>
						</div>
						
					</div>
				</van-pull-refresh>
			</van-tab>
			
			<van-tab title="可领红包">
				<div v-for="redBag in availableRedBags">
					<div class="order_box" >
						<div class="coupon coupon-wave-left coupon-wave-right coupon-yellow-gradient" @click="gain(redBag)">
							<div class="coupon-info coupon-hole coupon-info-right-dashed">
								<div class="coupon-store">{{redBag.red_bag_content}}</div>
								<div class="coupon-price">&yen;{{redBag.face_value}}<span>红包</span></div>
								<div class="coupon-description">{{redBag.red_bag_content}}</div>
							</div>
							<div class="coupon-get">
								<div class="coupon-desc">副券</div>
								<div class="coupon-expiry-date">{{redBag.dead_time}}<br/>到期</div>
							</div>
						</div>
					</div>
				</div>
			</van-tab>
		</van-tabs>
		
	</div>
</template>

<script>
	import {
		Toast
	} from 'vant';
	import Vue from 'vue'
	import { Notify } from 'vant';
	export default {
		name: 'RedBag',
		
		created() {
			Vue.axios.get(`http://localhost:8080/user/getlogin`).then(r=>{
				console.log(r.data)
				this.userObject = r.data.loginUser;
				if(!this.userObject){
					Toast('对不起,请先登录!');
					this.$router.push({
						name: 'Login'
					});
				}else{
					Vue.axios.post('http://localhost:8080/redbagrecord/getall').then(res=>{
						console.log(res)
						this.allRedBags=res.data.redbaglist;
						console.log(this.allRedBags);
					})
					Vue.axios.get('http://localhost:8080/redbag/getall').then(res=>{
						console.log(res)
						this.availableRedBags=res.data.redbaglist;
						console.log(this.availableRedBags);
					})
					// Vue.axios.get('http://localhost:8080/redbagrecord/getByState',{params:{redbag_state:63}}).then(res=>{
					// 	console.log(res)
					// 	this.outtimebags=res.data.redbaglist;
					// 	console.log(this.outtimebags);
					// })
					
				}
					
			 });	 
		},
		data() {
			return {
				isLoading: false,
				allRedBags: [],
				availableRedBags:[],
				activeName:'first',
				userObject:{},
				activeNames: [''],
			}
		},
		methods: {
		    onClickLeft() {
		      this.$router.replace('/personal');
		    },
			
			onRefresh() {
				setTimeout(() => {
					Toast('刷新成功');
					this.isLoading = false;
				}, 500);
			},
			
		    onClickRight() {
		      Toast('按钮');
		    },
			
			onChange(event) {
			    this.setData({
			      activeName: event.detail,
			    });
			 },
			 gain(redBag){
				 Vue.axios.get(`http://localhost:8080/redbagrecord/gain`,{params:{
					 red_bag_id:redBag.red_bag_id
				 }}).then(
				 r=>{
					 if(r.data.errorMsg){
						 Notify({ type: 'success', message: '领取成功' });
						 console.log(r.data);
						 //更新当前用户可领取的红包列表
						  this.availableRedBags = r.data.gainList;
						 //更新当前用户可用红包
						  this.allRedBags = r.data.useList;
					 }else{
						 Notify(r.data.errorContent)
					 }
				 }
				 )
			 },
		},
	}
</script>

<style lang="less">
	.redbag{
		height: 100%;
		width: 100%;
		//background-color:lightblue;
		background-color: white;
		.couponbar{
			display: flex;
			flex-wrap: wrap;
			//border: 1px solid #ffffff;
		}
		.coupon {
			display: inline-flex;
			color: white;
			//border: 1px solid #fff;
			position: relative;
			padding-left: .5rem;
			padding-right: .5rem;
			margin:10px;
			/** 这里不能用百分号，因为百分号是分别相对宽和高计算的，会导致弧度不同  */
			border-top-right-radius: .3rem;
			border-bottom-right-radius: .3rem;
			//overflow: hidden;
		}
		.coupon-yellow-gradient {
			background-image: linear-gradient(150deg, #F39B00 50%, #F39B00D8 50%);
		}
		.coupon-red-gradient {
			background-image: linear-gradient(150deg, #D24161 50%, #D24161D8 50%);
		}
		.coupon-green-gradient {
			background-image: linear-gradient(150deg, #7EAB1E 50%, #7EAB1ED8 50%);
		}
		.coupon-blue-gradient {
			background-image: linear-gradient(150deg, #50ADD3 50%, #50ADD3D8 50%);
		}
		
		
		/* 左边框的波浪 */
		.coupon-wave-left::before{
			content: '';
			position: absolute;
			top: 0;
			height: 100%;
			width: 12px;
			background-image: radial-gradient(white 0, white 4px, transparent 4px);
			/** 如果只设置为半径的两倍(直径)，那么半圆之间没有类似堤岸的间隔 */
			background-size: 14px 14px;
			background-position: 0 0px;
			background-repeat: repeat-y;
			z-index: 1;
		}
		.coupon-wave-left::before {
			left: -7px;
		}
		
		.coupon-info {
			padding-left: 1rem;
			padding-right: 1rem;
			padding-top: 1rem;
			padding-bottom: 1.5rem;
			position: relative;
			min-width: 12rem;
		}
		.coupon-info-right-dashed {
			border-right: 2px dashed white;
		}
		.coupon-info-right-solid {
			border-right: 2px solid white;
		}
		/* 使用两个边框为圆角的白色div制造半圆缺角，有个缺点是这个缺角必须与背景色相同（clip-path不好弄） */
		.coupon-hole::before, .coupon-hole::after {
			content: '';
			width: 1rem;
			height: 1rem;
			background-color: white;
			border-radius: 50%;
			position: absolute;
			right: -.6rem;
		}
		.coupon-info::before {
			top: -.5rem;
		}
		.coupon-info::after {
			bottom: -.5rem;
		}
		.coupon-info>div {
			margin-bottom: .2rem;
		}
		.coupon-price {
			font-size: 250%;
			font-weight: bold;
		}
		.coupon-price>span {
			font-size: 40%;
			margin-left: .5rem;
			font-weight: normal;
		}
		.coupon-get {
			padding: 1rem;
			/** 这里使用flex是为了让文字居中 */
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			min-width: 5rem;
			position: relative;
		}
		.coupon-get>.coupon-desc {
			font-size: 150%;
			margin-bottom: .5rem;
			font-weight: bold;
		}
		
		.gain_button {
			display: flex;
			height: 45px;
			margin: 0 10px;
			background-color: #fff;
			justify-content: space-between;
			border-bottom-right-radius: 10px;
			border-bottom-left-radius: 10px;
			>div{
				margin: 0 10px;
				display: flex;
				&:nth-child(1){
					margin-left: 15px;
					font-size: 15px;
					line-height: 35px;
					color: #f5bc10; 
					letter-spacing: 1px;
				}
			}
		}

	}
	
	
	
	
	
</style>
